<template>
  <div class="topNav">
        <div class="topLeft">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-31liebiao"></use>
            </svg>
        </div>
        <div class="topCenter">
            <span class="navBtn">我的</span>
            <span class="navBtn active">发现</span>
            <span class="navBtn">云村</span>
            <span class="navBtn">视频</span>
        </div>
        <div class="topRight">
            <svg class="icon search" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
      </div>
</template>

<script>
export default {
    name: 'topNav',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
    .topNav{
        width: 7.5rem;
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.2rem;
        .icon{
            width: 0.4rem;
            height: 0.4rem;
        }
        .search{
            widows: 0.4rem;
            height: 0.4rem;
        }
        .topCenter{
            width: 4rem;
            display: flex;
            justify-content: space-around;
            .active{
                font-weight: 900;
            }
        }
        .navBtn{

        }
    }
</style>